<template>
    <div>
        <!-- 中部内容盒子 -->
        <div class="midContent">
            <!-- 索引栏 -->
            <div class="midContent_nevigation">
                <span class="midContent_nevigation_homePage">
                    <img src="../../assets/images/房子.png" alt="">
                    <span>首页</span>
                </span>
                <span class="midContent_nevigation_split">/</span>
                <span>视频详情</span>
            </div>
            <!-- 课程名称栏 -->
            <div class="midContent_className">
                <!-- 左边图片 -->
                <div class="midContent_className_left">
                    <img :src=list.bannerFileUrl alt="">
                </div>
                <!-- 右边内容 -->
                <span class="midContent_className_right_title_favorite">
                    <img src="../../assets/images/心.png" alt="">
                    <span>收藏</span>
                </span>
                <div class="midContent_className_right">
                    <!-- 第一行 -->
                    <div class="midContent_className_right_title">
                        <span class="midContent_className_right_title_name">{{list.courseTitle}}</span>
                    </div>
                    <!-- 第二行 -->
                    <div class="midContent_className_right_two">
                        <span class="midContent_className_right_two_content">
                            <span>累计</span><span>{{learningNum}}</span><span>人学习</span>
                        </span>

                        <a-rate :default-value="5" disabled />
                    </div>

                    <div v-if="list.isFree==1">
                        <!-- 第三行 -->
                        <div class="midContent_className_right_three">免费</div>
                        <!-- 第四行 -->
                        <div class="midContent_className_right_four">立即观看</div>
                    </div>

                    <div v-if="list.isFree==0">
                        <!-- 第三行 -->
                        <div class="midContent_className_right_three_nfree">
                            <span>&yen;{{list.payPrice}}</span>
                            <span><s>{{list.coursePrice}}</s></span>
                            <div style="box-sizing: border-box;margin-top: 14px">
                                <div class="ant-tag-orange">限时钜惠</div>
                            </div>
                        </div>
                        <!-- 第四行 -->
                        <!--                        购物车-->
                        <div style="width: 750px;margin: 25px 0 0 0;font-size: 24px;">
                            <div class="nfree_button">
                                <button>立即购买</button>
                                <button class="midContent_className_right_four" style="border: none;" @click="addCar">加入购物车</button>
                            </div>
                        </div>

                    </div>

                </div>
            </div>
            <div style="clear: both;"></div>
            <!-- 信息栏 -->
            <div class="midContent_classMessage">
                <div>
                    <a-tabs default-active-key="1" @change="callback">
                        <!--                        tab1    课程描述-->
                        <a-tab-pane key="1" tab="课程描述" v-html="list.courseDetail" class="midContent_classMessage_tabContent_one">
                        </a-tab-pane>
                        <!--tab2 课程目录-->
                        <!--大盒子-->
                        <a-tab-pane key="2" tab="目录" force-render>
                            <!--padding盒子-->
                            <div class="midContent_classMessage_tabContent_two" style="padding: 0px 30px 30px 30px;">
                                <!--渲染盒子-->
                                <div v-for="(item,index) in section" :key="index">
                                    <div>
                                        <!--标题-->
                                        <h2>
                                            <div style="float: left">
                                                <span>{{index+1}}.</span>
                                                <span>{{item.sectionName}}</span>
                                            </div>
                                            <div class="section-down">
                                                <span>
                                                    <a-icon type="cloud-download" />
                                                    <span>下载</span>
                                                </span>

                                            </div>
                                        </h2>
                                        <!--                                        清除浮动-->
                                        <div style="clear: both"></div>
                                        <!-- 章节-->
                                        <div class="class_parater_box" style="margin:20px 0px 10px 0px">
                                            <div v-for="(items,value) in item.subSections" :key="value" class="class_parater" @mouseenter="changeWord" @mouseleave="changeWordout">
                                                <div>{{index+1}}-{{value+1}}&nbsp;&nbsp;{{items.sectionName}}</div>
                                                <!--第一个试看-->
                                                <div v-if="value==0&&index<5&&flag==false">
                                                    <a-icon type="play-circle" />
                                                </div>
                                                <div v-else-if="value==0&&index<5&&flag==true">试看</div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </a-tab-pane>
<!--                     tab3   发布评论-->
                        <a-tab-pane key="3" tab="评论">

                            <div class="comment">
                                <!--输入评论-->
                                <div>评论</div>
                                <div>

                                    <div>
                                        <span>
                                            <a-rate v-model="value" :tooltips="desc" />
                                            <span class="ant-rate-text">{{ desc[value - 1] }}</span>
                                        </span>
                                    </div>
                                    <div>
                                        <a-textarea placeholder="Basic usage" :rows="4" />
                                    </div>
                                    <a-button type="primary" style="    float: right;
                                               margin: 20px 0px 0px;color: #fff;
                                           background-color: #00cf8c;
                                          border-color: #00cf8c;
                                          text-shadow: 0 -1px 0 rgba(0,0,0,.12);
                                            -webkit-box-shadow: 0 2px 0 rgba(0,0,0,.045);
                                          box-shadow: 0 2px 0 rgba(0,0,0,.045);">
                                        发布评论
                                    </a-button>
                                    <div style="clear: both"></div>
                                </div>
                                <!--                                评论内容-->
                                <hr style="    margin: 20px 0px;height: 1px;border: 0px;background-color: rgb(232, 232, 232);color: rgb(232, 232, 232);">
                                <div v-for="(item,index) in comment" :key="index">
                                    <div class="comment_title">
                                        <!--                                        用户显示-->
                                        <div>
                                            <span>
                                                <a-avatar icon="user" v-if="item.user.wechatAvatar==undefined"  />
                                                <img :src=item.user.wechatAvatar v-else-if="item.user.wechatAvatar" alt="" style="width: 32px;height: 32px;border-radius: 50%">
                                            </span>
                                            <span style="vertical-align: middle;
                                                             margin: 0px 10px;
                                                             width: 50%;
                                                             overflow: hidden;">
                                                {{item.user.nickname}}
                                            </span>
                                        </div>
                                        <!--                                        用户评分-->
                                        <div>
                                            <a-rate :default-value="item.score" disabled />
                                        </div>
                                    </div>
                                    <div class="comment_content">{{item.commentContent}}</div>
                                    <div class="comment_time">{{item.createdTime}}
                                        <span>回复</span>
                                    </div>
                                    <a-divider />
                                </div>
                                <a-pagination :current="current" :total="5" @change="onChange" style="    text-align: center;" />
                            </div>

                        </a-tab-pane>
                    </a-tabs>
                </div>


            </div>
        </div>
        <!-- 清除浮动 -->
        <div style="clear: both;"></div>
    </div>
</template>

<script>
    import {getCourseId,getCourseComment,inBuyCar,buyCarMsg} from '../../api/Tlmusic'
    // import {} from '../../api/Tlmusic'
    import {mapState} from 'vuex'
    export default {
        name: "VideoDetails",
        data(){
            return{
                list: {},
                learningNum:'',
                section:[],
                flag: false,
                value: 5,
                desc: ['差', '一般', '中等', '好', '非常好'],
                comment:[],
                current: 3,
                carMsg:[],
                carNum1:0
            }
        },
        methods: {
            callback(key) {
                console.log(key);
            },
            changeWord(){
                // console.log(123)
                this.flag = !this.flag
            },
            changeWordout(){
                // console.log(456)
                this.flag = !this.flag
            },
            onChange(current) {
                this.current = current;
            },
            addCar(){
                inBuyCar(this.$route.params.id).then(res=>{
                    console.log(res)
                    if (res.code ===0&&res.msg=='操作成功' ){
                        console.log('添加购物车成功')
                        this.$store.commit("addCarNum", {isAddCar: true})
                        buyCarMsg().then(res=>{
                           this.carNum1=res.shoppingCartList.length
                            this.carMsg = res.shoppingCartList
                            this.$store.commit("addCarNum", {isAddCar: true,carNum:this.carNum1,buyCarMsg:this.carMsg})
                        })
                    }
                    else if (res.code ===0&&res.msg=='已经加入购物车'){
                        alert('已经在购物车啦')
                    }else {
                        console.log(res)
                    }
                } )
            }
        },

        created() {
            getCourseId(this.$route.params.id).then(res => {
                // console.log(res)
                this.list = res.data
                this.learningNum=this.$route.params.learningNum
                this.section = res.data.sections
            }),
            getCourseComment(this.$route.params.id).then(res=>{
                console.log(res)
                this.comment = res.rows
            } )
        },
    }
</script>

<style scoped lang="less">
    /* 中部内容盒子 */
    .midContent_classMessage>div{
        padding: 0 10px;
    }
    .midContent{width: 100%;
        background-color: #f4f4f4;
        overflow: hidden;
    }
    /* <!-- 索引栏 --> */
    .midContent_nevigation{margin: 15px 0px 15px 0px;
        color: #898989;
        font-size: 14px;
        margin-left: 3%;
    }
    .midContent_nevigation_split{margin: 0px 10px 0px 10px;}


    /* 课程名称栏 */
    .midContent_className{
        width: 91%;
        margin: 0 auto;
        background-color: white;
        overflow: hidden;
        position: relative;
        padding: 20px;
    }

    /* 左 */
    .midContent_className_left{float: left;
        display: block;
        /*-webkit-box-sizing: border-box;*/
        box-sizing: border-box;
        width: 33.33333333%;
    }
    .midContent_className_left>img{
        width: 330px;
        height: 220px;
    }


    /* 右 */
    .midContent_className_right{
        float: left;
        width: 58.3%;
        /*margin-left: 4.5%;*/
        box-sizing: border-box;
        /*margin-top: 30px;*/
    }
    /* 第一行 */
    .midContent_className_right_title_name{
        font-size: 24px;

    }
    .midContent_className_right_title_favorite{
        cursor: pointer;
        display: inline-block;
        text-align: center;
        width: 110px;
        height: 30px;
        font-size: 16px;
        line-height: 26px;
        border: 1px solid #999;
        float: right;
        color: #999;
        position: absolute;
        right: 30px;
        top: 30px;
    }

    /* 第二行 */
    .midContent_className_right_two{
        font-size: 12px;
        color: #898989;
    }
.midContent_className_right_two_content{margin-right: 10px}
    /* 第三行 */
    .midContent_className_right_three{
        color: #00cf8c;
        font-size: 24px;
        margin-top: 22px;
    }
    .midContent_className_right_three_nfree{
        height: 70px;
        margin: 10px 0;
        span:nth-of-type(1){    box-sizing: border-box;font-size: 24px;};
        span:nth-of-type(2){    text-decoration: line-through;
            color: rgb(255, 79, 35);
            font-size: 14px;
            margin: 0px 10px;}

        .ant-tag-orange{
            color: #fa8c16;
            background: #fff7e6;
            border-color: #ffd591;
            display: inline-block;
            height: 22px;
            margin-right: 8px;
            padding: 0 7px;
            font-size: 12px;
            line-height: 20px;
            white-space: nowrap;
            border-radius: 2px;
            cursor: pointer;
            opacity: 1;
            border: 1px solid;
        }
    }
    /* 第四行 */
    .midContent_className_right_four{
        width: 20%;
        height: 45px;
        line-height: 45px;
        text-align: center;
        background-color: #00cf8c;
        color: white;
        margin-bottom: 20px;
        cursor: pointer;
    }

    .nfree_button{
        button:nth-of-type(1){
            background: rgb(255, 128, 0);
            border: rgb(255, 128, 0);
        }
        button{
            width: 160px;
            height: 45px;
            font-size: 18px;
            margin-right: 10px;
            outline: none;
            cursor: pointer;
            color: white;
        }
    }

    /* 信息栏 */
    .midContent_classMessage{
        width: 91%;
        margin: 0 auto;
        background-color: white;
        overflow: hidden;
        margin-top: 20px;
        margin-bottom: 58px;
    }
    /* tab切换标题 */
    .midContent_classMessage_tabTitle{
        border-bottom: 1px solid #cccccc;
        padding: 0px 5px 0px 5px;
        overflow: hidden;
    }
    .midContent_classMessage_tabTitle>li{
        float: left;
        width: 7.3%;
        height: 45px;
        line-height: 45px;
        text-align: center;
        cursor: pointer;
    }
    .midContent_classMessage_tabTitle>li:nth-of-type(1){
        border-bottom: 2px solid #00cf8c;
        color: #00cf8c;
    }

    /* tab切换内容一 */
    /* 段落 */
    .midContent_classMessage_tabContent_one{
        margin-bottom: 33px;
    }
    .midContent_classMessage_tabContent_one>p{
        text-indent: 2em;
        color: #5f5f5f;
    }
    .midContent_classMessage_tabContent_one>p:nth-of-type(1){
        margin-top: 30px;
    }
/*    tab切换内容二*/
    .midContent_classMessage_tabContent_one{
        padding: 30px;
    }

/*下载按钮*/
    .section-down{
        width: 88px;
        height: 30px;
        background-color: #2DB7F5;
        text-align: center;
        line-height: 30px;
        color: white;
        font-size: 14px ;
        border-radius: 4px;
        float: right;
        cursor: pointer;
    }


/*章节*/
    .class_parater{
        height: 50px;
        line-height: 30px;
        padding: 10px 20px;
        background: #f2f2f2;
        margin: 10px 0;

        div:nth-of-type(1){
            float: left;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 1;
        }
        div:nth-of-type(2){
            float: right;
        }

    }
    .class_parater:hover{
        color: #00cf8c;
    }

/*    评论*/
.comment{padding: 30px}
    /*用户*/
    .comment_title{
        display: flex;
        justify-content: space-between;
    }
/*内容*/

  .comment_content{padding: 10px 0px 10px 40px;}

    /*时间*/
    .comment_time{
        padding: 0 10px 0 0;
        color: #999;
        text-align: right;
    }

</style>